<template>
  <el-popover placement="bottom" :width="300" trigger="click" :disabled="disabled">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge :value="value" :max="max" :is-dot="isDot" style="cursor: pointer;">
        <component :is='`el-icon-${toLine(icon)}`'></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { toLine } from '../../../utils';

let props = defineProps({
  icon: {
    type: String,
    default: 'Bell'
  },
  //通知数量
  value: {
    type: [String, Number],
    default: ''
  },
  max: {
    type: Number
  },
  //是否显示小圆点
  isDot: {
    type: Boolean,
    default: false
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped lang="scss">
svg{
  width: 2em;
  height: 2em;
}
</style>